<template>
    <div class="page-container page-container-create">
        <p class="font22 mb20">会员引流规则详情</p>
        <div class="tab-container createSet active2">
            <el-tabs v-model="activeNameTab" type="card">
                <el-tab-pane label="设置规则" name="1">
                    <div>
                        <form class="form-horizontal ">
                            <div class="form-group">
                                <label class="color333 font16 textColor333" >规则名称：</label>
                                <div class="color333">{{data.drainageName}}</div>
                            </div>
                            <div class="form-group" style="padding-left:30px">
                                <label class="color333 font16 textColor333" >类型：</label>
                                <div class="color333">{{data.drainageType}}</div>
                            </div>
                            <div class="form-group">
                                <label class="color333 font16 textColor333" >发布渠道：</label>
                                <div class="color333">{{data.childNames}}</div>
                            </div>
                            <div class="form-group flexBox">
                                <label class="color333 font16 textColor333 titleText" >申请备注：</label>
                                <div class="color333">{{data.remark}}</div>
                            </div>
                        </form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="触达内容" name="2">
                    <div class="tab-container createSet active2">
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="短信" name="1" v-if="data.drainageTypeList.indexOf('1') != -1">
                                <div>
                                    <form class="form-horizontal ">
                                        <div class="form-group" v-if="data.drainageVariables.smsInfo != null">
                                            <label class="color999 font16 textColor333" >短信内容：</label>
                                            <div class="color333">{{data.drainageVariables.smsInfo.previewContent}}</div>
                                        </div>
                                    </form>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="邮件" name="2" v-if="data.drainageTypeList.indexOf('2') != -1">
                                <div>
                                    <form class="form-horizontal ">
                                         <div class="form-group" v-if="data.drainageVariables.mailInfo != null">
                                            <label class="color333 font16 textColor333" >邮件标题：</label>
                                            <div class="color333">{{data.drainageVariables.mailInfo.mailTitle}}</div>
                                        </div>
                                        <div class="form-group flexBox" v-if="data.drainageVariables.mailInfo != null">
                                            <label class="color333 font16 textColor333 titleText" >邮件内容：</label>
                                            <div class="color333" v-html="data.drainageVariables.mailInfo.previewContent"></div>
                                        </div>
                                    </form>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="H5入驻" name="3" v-if="data.drainageTypeList.indexOf('3') != -1">
                                 <form class="form-horizontal ">
                                        <div class="form-group" v-if="data.drainageVariables.settleInfo != null">
                                        <label class="color333 font16 textColor333" >外部链接：</label>
                                        <div class="color333">{{data.drainageVariables.settleInfo.url}}</div>
                                    </div>
                                    <div class="form-group" v-if="data.drainageVariables.settleInfo != null && data.drainageVariables.settleInfo.imgUrl != null">
                                        <label class="color333 font16 textColor333" >banner：</label>
                                        <div class="color333">
                                            <img :src="data.drainageVariables.settleInfo.imgUrl" />
                                        </div>
                                    </div>
                                </form>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            data:{
                drainageTypeList:[],
            },
            activeName: null,
            activeNameTab: "1",
            id: 0,

        }
    },
    methods:{
        getInfo(){
            this.utils.request.queryDrainageById({id:this.id},res=>{
                if(res.code == '0000'){
                    for(var key in res.data){
                        if(key == 'drainageVariables'){
                            this.$set(this.data,key, JSON.parse(res.data[key]));
                        }else{
                            this.$set(this.data,key,res.data[key])
                        }
                    }
                    this.$set(this.data,"drainageTypeList", res.data["drainageTypes"].split(","));
                    this.$set(this.data,"channelCodeList",res.data["channelCodes"].split(","));
                    let drainageTypes  = [];
                    this.data.drainageTypeList.forEach(item=>{
                        if(item == "1"){
                            drainageTypes.push("发短信");
                        }else if(item == "2"){
                            drainageTypes.push("发邮件");
                        }else if(item == "3"){
                            drainageTypes.push("H5入驻");
                        }
                    })

                    this.data.drainageType = drainageTypes.join("、");

                    this.activeName = this.data.drainageTypeList[0]

                    this.utils.request.queryAllChild({},res=>{
                        if(res.code == '0000'){
                            let childList = res.data;
                            childList.unshift({"deptId":179,"childName":"卡奥斯运营中心","id":"179"});

                            let childNameList = [];
                            childList.forEach(item=>{
                                let channelInfo = this.data.channelCodeList.find(function(m){
                                    return m == item.id
                                })
                                if(channelInfo != null){
                                    childNameList.push(item.childName);
                                }
                            })
                            this.$set(this.data,"childNames",childNameList.join("、"));
                        }
                    })
                }
            })
        }
    },
    mounted(){
        this.id = this.$route.params.id;
        this.getInfo();
    }
}
</script>

<style lang="scss" scoped>
    /deep/ .form-group{
        display: flex;
        margin-bottom: 20px;
    }

</style>